<!--
 * @Author: 极客James
 * @Motto: 求知若渴,虚心若愚
 * @Github: https://github.com/Geek-James/ddBuy
 * @掘金: https://juejin.im/user/5c4ebc72e51d4511dc7306ce
 * @LastEditTime: 2019-11-07 09:18:59
 * @Description: 我的->我的订单->订单类型
 * @FilePath: /ddBuy/src/views/mine/Children/MyOrderChildren/OrderType.vue
 -->
<template>
  <div id="orderType">
    <div v-if="tableData.length > 0">
      <template>
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column prop="orderInfoId" label="订单号" width="320">
          </el-table-column>
          <el-table-column prop="orderInfoName" label="收货人" width="100">
          </el-table-column>
          <el-table-column prop="" label="商品信息" width="350">
            <template slot-scope="scope">
              <p v-for="(item, index) in scope.row.tbSaleNumDtos" :key="index">
                <span style="color: red">商品名称:</span>{{ item.name }},
                <span style="color: red">商品数量:</span>{{ item.num }},
                <img :src="item.smallImage" width="50px" height="50px" />
              </p>
            </template>
          </el-table-column>   

          <el-table-column prop="orderInfoTimeStr" label="下单日期" width="180">
          </el-table-column>
          <el-table-column prop="orderInfoState" label="订单状态" width="120">
          </el-table-column>
          <el-table-column
            prop="orderInfoSalePrice"
            label="订单总金额"
            width="100"
          >
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" @click="handleClick(scope.row)" v-if="isshow1"
                >去支付</el-button
              >
              <el-button size="mini" @click="Confirmreceipt(scope.row)" v-if="isshow2"
                >确认收货</el-button
              >
              <el-button size="mini" @click="handleEdit(scope.row)"
                >取消订单</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>
    <div v-else class="noDataPlaceHold">
      <img src="./../../../../images/mine/noData.jpeg" alt="" />
      <span class="desc">{{ $t("mine.feedbackTip") }}</span>
    </div>
  </div>
</template>
<script type="text/javascript">
export default {
  props: {
    orderTypeDataArray:Array
  },
  mounted() {
    this.display();
    this.isshow1=true;
    this.isshow2=false;
    if(this.orderTypeDataArray==30)
    {
      this.isshow1=false;
      this.isshow2=true;
    }
  },
  
  data() {
    return {
      tableData: [],
    };
  },
  components: {},
  methods: {
    display() {
      this.$axios
        .get("https://localhost:44325/api/app/order/show-order?options="+this.orderTypeDataArray)
        .then((Response) => {
          console.log(Response.data);
          this.tableData = Response.data;
          this.tableData.map(function (a) {
            if (a.orderInfoState == 10) {
              a.orderInfoState = "已下单";
            }if (a.orderInfoState == 20) {
              a.orderInfoState = "待发货";
            }if (a.orderInfoState == 30) {
              a.orderInfoState = "已发货";
            }if (a.orderInfoState == 40) {
              a.orderInfoState = "已完成";
            }if(a.orderInfoState == 50){
              a.orderInfoState = "订单取消";
            }
          });
          
        });
    },
    handleClick(row) {
      if (row.orderInfoState == "订单取消"){
        alert('对不起，该订单已取消!');
      }
      else
      {
         window
        .open(
          "https://localhost:44325/api/app/a-li-pay/pay?Subject=row.orderInfoName&outTradeNo=" +
            row.orderInfoId +
            "&totalAmount=" +
            row.orderInfoSalePrice
        )
        .then((Response) => {
          if (Response.data == "success") {
            alert("付款成功！");
          }
        });
      }
     
    },
    handleEdit(row) {
      if (row.orderInfoState == "订单取消") {
        alert("对不起，该订单已取消！请再次下单");
      } else {
        if (confirm("你确定取消该订单吗?")) {
          this.$axios
            .post(
              "https://localhost:44325/api/app/order/cancellation?guid=" +
                row.orderInfoId
            )
            .then((Response) => {
              if (Response.data > 0) {
                this.$message({
                  message: "取消成功",
                  type: "success",
                });
                this.$router.push("/dashboard/mine/myOrder");
              } else {
                this.$message({
                  message: "取消失败",
                  type: "danger",
                });
              }
            });
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>
#orderType {
  margin-top: 1.85rem;
  height: 20rem;
  .noDataPlaceHold {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    img {
      width: 60%;
      height: 60%;
    }
    .desc {
      color: grey;
      font-size: 0.6rem;
    }
  }
  .noData {
    margin-top: 3rem;
    width: 100%;
    height: 100%;
    text-align: center;
  }
}
</style>
